<template>
  <div>
    <input type="text" name="" id="" v-model="keyword" />
    <div>{{ keyword }}</div>
  </div>
</template>
<script lang="ts">
// defineComponent并没有实现任何的逻辑，只是把接收的Object直接返回
// 它的存在是完全让传入的整个对象获得对应的类型，它的存在就是完全为了服务 TypeScript 而存在的
import { defineComponent, customRef } from "vue";
function useDebouncedRef<T>(value: T, delay = 200) {
  let timeout: number;
  return customRef((track, trigger) => {
    return {
      get() {
        //告诉vue追踪数据
        track();
        return value;
      },
      set(newValue: T) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          //更换数据
          value = newValue;
          //告诉vue去触发页面更新
          trigger();
        }, delay);
      },
    };
  });
}
export default defineComponent({
  name: "App",
  setup(props, context) {
    console.log('props==', props)
    console.log('context==', context)
    //第一个参数为设置keyword的初始值,第二个参数为延迟更新的时间
    const keyword = useDebouncedRef("aaa", 500);
    return {
      keyword,
    };
  },
});
</script>
